<template>
  <view>
    <!-- 搜索框 -->
    <Search></Search>
    <!-- 轮播图  -->
    <u-swiper
      :list="imgList"
      name="image_src"
      height="340"
      img-mode="scaleToFill"
      border-radius="0"
    ></u-swiper>
    <!-- 导航 -->
    <view class="catitems u-flex">
      <navigator
        class="u-flex-1 u-p-20"
        v-for="item in catitemsList"
        :key="item.name"
      >
        <u-image :src="item.image_src" mode="widthFix"></u-image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floor">
      <!-- 遍历每个模块结构 -->
      <view
        class="floor-group"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <!-- 标题结构 -->
        <view class="floor-title">
          <u-image :src="item1.floor_title.image_src" mode="widthFix" />
        </view>
        <!-- 图片结构 -->
        <view class="floor-content">
          <navigator v-for="item2 in item1.product_list" :key="item2.name">
            <u-image
              :src="item2.image_src"
              height="100%"
              mode="scaleToFill"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgList: [], //轮播图数组
      catitemsList: [], //导航
      floorList: [], //楼层
    };
  },
  created() {
    this.getSwiper(); // 渲染轮播图
    this.getCatitems(); //渲染导航
    this.getfloor(); //楼层
  },
  methods: {
    // 获取轮播图
    async getSwiper() {
      // uni api的写法
      // const [name, data] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      // });
      // console.log(data);
      // // 将请求回来的值赋值给轮播图数组
      // this.imgList = data.data.message;

      // uviewui的写法
      const resSwiper = await this.$u.get("/home/swiperdata");
      // console.log(resSwiper);
      this.imgList = resSwiper.message;
    },
    async getCatitems() {
      // 导航
      const resCatitems = await this.$u.get("/home/catitems");
      // console.log(resCatitems);
      this.catitemsList = resCatitems.message;
    },
    async getfloor() {
      const resFloor = await this.$u.get("/home/floordata");
      // console.log(resFloor);
      this.floorList = resFloor.message;
    },
  },
};
</script>

<style lang="scss">
.floor-group {
  margin-bottom: 20rpx;
  .floor-content {
    overflow: hidden;
    navigator {
      float: left;
      margin-left: 16rpx;
    }
    navigator:first-child {
      width: 232rpx;
      height: 386rpx;
    }
    navigator:nth-last-child(-n + 4) {
      width: 232rpx;
      height: 188rpx;
    }
    navigator:nth-last-child(-n + 2) {
      margin-top: 10rpx;
    }
  }
}
</style>